<template>
  <div class="charts_container" ref="echartsPoly"></div>
</template>

<script>
export default {
  name: "moreLegendChart",
  data() {
    return {
      chartInstance: null,
      initOption: null,
    };
  },
  created() {},
  mounted() {
    this.initChart();
  },
  props: {
    chartsData: {
      type: Array,
      required: true,
    },
  },
  watch: {
    chartsData: {
      handler(newVal, oldVal) {
        if (oldVal !== newVal && oldVal !== undefined) {
          if (newVal !== []) {
            console.log("newValqqqqq", newVal, oldVal);
            this.realData = newVal;
            this.timeWay(this.realData);
            var copys = JSON.parse(JSON.stringify(this.realData));
            copys[0].splice(0, 1);
            const seriesGroup = [];
            // copys[0].splice(0, 3); // 删除null的标题
            copys[0].forEach((item) => {
              seriesGroup.push({
                encode: {
                  // 将 "amount" 列映射到 X 轴。
                  x: "createTime",
                  // 将 "product" 列映射到 Y 轴。
                  y: [item],
                },
                name: item,
                type: "line",
                symbol: "circle", // 节点样式
                // data: [120, 289, 250, 240, 290, 200],
                lineStyle: {
                  color: "rgb(48, 200, 252)",
                },
                itemStyle: {
                  color: "rgb(48, 200, 252)",
                },
              });
            });
            var cutNull = JSON.parse(JSON.stringify(this.realData));
            cutNull.forEach((item) => {
              // 删除null的数据
              // item.splice(1, 3);
            });
            console.log(seriesGroup,"1111");
            console.log(cutNull,'2222');
            // console.log('cutNull', cutNull)
            this.updateChart(seriesGroup, cutNull);
          }
        }
      },
      immediate: true,
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  methods: {
    initChart() {
      this.initOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        legend: {
          top: "-1%",
          textStyle: {
            color: "rgb(154, 170, 203)",
          },
          selectedMode: "single", // 单选
          type: "scroll",
          width: "90%",
          selected: {
            "3#车位": true, // 默认选中
            "7#车位": false,
            "11#车位": false,
            "13#车位上": false,
            "13#车位中": false,
            "13#车位下": false,
            "15#车位": false,
            "17#车位": false,
            "19#车位上": false,
            "19#车位中": false,
            "19#车位下": false,
            "21#中": false,
            "23#中": false,
            "25#": false,
            "31#": false, // 这俩有空格
            "21#底": false, // 这俩有空格
            燃烧室: false,
            F2入口: false,
            F3出口: false, // 后面的氧含量的不展示在这里
          },
        },
        grid: {
          bottom: "11%",
          right: "5%",
          top: "18%",
          left: "6%",
        },
        toolbox: {
          show: true,
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none' // 缩放功能
            // },
            // dataView: { readOnly: false }, // 数据表格功能
            // magicType: { type: ['line', 'bar'] }
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            // 不显示轴刻度
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgb(154, 170, 203)",
            },
          },
          axisLabel: {
            interval: "auto",
            formatter: function (value) {
              let ret = ""; // 拼接加\n返回的类目项
              var maxLength = 6; // 每行最多个数
              var valLength = value.length; // x轴一个项的总数
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                // 如果大于5个字符
                for (let i = 0; i < rowN; i++) {
                  let temp = "";
                  temp =
                    value.substring(i * maxLength, i * maxLength + maxLength) +
                    "\n";
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            },
            textStyle: {
              fontSize: 8,
            },
          },
          // data: ['08:01', '08:02', '08:03', '08:04', '08:05', '08:06']
        },
        yAxis: [
          {
            name: "温度(℃)",
            nameTextStyle: {
              color: "rgb(154, 170, 203)",
            },
            type: "value",
            axisLabel: {
              formatter: "{value}",
              color: "rgb(154, 170, 203)",
            },
            axisTick: {
              // 不显示轴刻度
              show: false,
            },
            min: 0,
            // max: 400, // 写死y轴范围
            splitLine: {
              // 属于y轴的是grid横线
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgb(255, 255, 255, 0.2)",
              },
            },
          },
          // {
          //   type: 'value',
          //   name: '磨电流(A)',
          //   nameTextStyle: {
          //     color: 'rgb(154, 170, 203)'
          //   },
          //   min: 0,
          //   // max: 400,
          //   axisTick: { // 不显示轴刻度
          //     show: false
          //   },
          //   axisLabel: {
          //     color: 'rgb(154, 170, 203)'
          //   },
          //   splitLine: { // 属于y轴的是grid横线
          //     show: true,
          //     lineStyle: {
          //       type: 'dashed',
          //       color: 'rgb(154, 170, 203)'
          //     }
          //   }
          // }
        ],
        dataset: {
          source: [],
        },
        series: [],
        // [
        //   {
        //     name: '磨喂料量',
        //     type: 'line',
        //     symbol: 'circle', // 节点样式
        //     data: [120, 289, 250, 240, 290, 200],
        //     lineStyle: {
        //       color: 'rgb(48, 200, 252)'
        //     },
        //     itemStyle: {
        //       color: 'rgb(48, 200, 252)'
        //     }
        //   },
        //   {
        //     name: '磨电流',
        //     // yAxisIndex: 1,
        //     symbol: 'circle', // 节点样式
        //     type: 'line',
        //     data: [100, 224, 132, 155, 243, 235],
        //     lineStyle: {
        //       color: 'rgb(246, 121, 103)'
        //     },
        //     itemStyle: {
        //       color: 'rgb(246, 121, 103)' // 拐点的颜色
        //     }
        //   }
        // ]
      };
      this.chartInstance = this.$echarts.init(this.$refs.echartsPoly);
      // console.log('温度曲线initOption', this.initOption)
      this.chartInstance.setOption(this.initOption);
      this.echartsResize();
    },
    updateChart(seriesGroup, realData) {
      const dataOption = {
        series: seriesGroup,
        dataset: {
          source: realData, // 数组
        },
      };
      this.chartInstance.setOption(dataOption);
    },
    echartsResize() {
      window.addEventListener("resize", () => {
        this.chartInstance.resize();
      });
    },
    timeWay(arrBig) {
      for (var i = 1; i < arrBig.length; i++) {
        arrBig[i][0] = arrBig[i][0].substring(5, arrBig[i][0].length - 3);
      }
    },
  },
};
</script>

<style  scoped>
.charts_container {
  width: 100%;
  height: 100%;
}
</style>
